<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <link rel="icon" href="logo.jpg" type="image/x-icon" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LI ZONGYANG</title>
    <meta name="description" content="Inspiration for Article Intro Effects" />
    <meta name="keywords" content="title, header, effect, scroll, inspiration, medium, web design" />
    <meta name="author" content="李宗洋" />

    <link rel="stylesheet" type="text/css" href="normalize.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="stylea.css">
    <link rel="stylesheet" href="styleb.css">
    <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
    <link rel="stylesheet" type="text/css" href="crowd.css">


    <link rel="stylesheet" type="text/css" href="component.css" />

</head>

<body class="demo-3">
    <div id="container" class="container intro-effect-sliced">

        <header class="header">
            <div class="bg-img"><img src="3.jpg" alt="Background Image" width="1920px" height="1080px" /></div>
            <div class="title">


            </div>
            <div class="containera ">
                <div class="index-bg">
                    <div class="stars">
                        <div class="star"></div>
                        <div class="star" style="top: 80px; left: 800px; animation-delay: 3s;"></div>
                        <div class="star" style="top: 40px; left: 646px; animation-delay: 2s;"></div>
                        <div class="star" style="top: 120px; left: 395px; animation-delay: 4s;"></div>
                        <div class="star" style="top: 160px; left: 765px; animation-delay: 1s;"></div>
                        <div class="star" style="top: 170px; left: 1200px; animation-delay: 2s;"></div>
                        <div class="star" style="top: 200px; left: 1000px; animation-delay: 1s;"></div>
                    </div>
                </div>





                <div class="social-btns">
                    <a class="btn facebook" href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a><br>
                    <a class="btn twitter" href="https://twitter.com/home?lang=en"><i class="fa fa-twitter"></i></a><br>

                    <a class="btn instagram" href="https://www.instagram.com/"><i class="fa fa-instagram"></i></a><br>
                    <a class="btn pinterest" href="https://www.pinterest.com/01d399oopsu7wv6w76kcflc6zyobh7/_saved/"><i class="fa fa-pinterest"></i></a>

                </div>


                <div class="slider">
                    <p style="color:rgb(255, 255, 255)">一些作品</p>

                    <input type="radio" name="slide_switch" id="id1" />
                    <label for="id1">
                       <div class="yua
                       "></div>
                    </label>
                    <img src="t1.png" />


                    <input type="radio" name="slide_switch" id="id2" checked="checked" />
                    <label for="id2">
                        <div class="yua
                        "></div>
                    </label>
                    <img src="t2.png" />

                    <input type="radio" name="slide_switch" id="id3" />
                    <label for="id3">
                        <div class="yua
                        "></div>
                    </label>
                    <img src="t3.png" />

                    <input type="radio" name="slide_switch" id="id4" />
                    <label for="id4">
                        <div class="yua
                        "></div>
                    </label>
                    <img src="t4.png" />

                    <input type="radio" name="slide_switch" id="id5" />
                    <label for="id5">
                        <div class="yua
                       "></div>
                    </label>
                    <img src="t5.png" />
                </div>
                <div class="yg">简介</div>
                <div class="articlea">
                    <div class="article">

                        <div class="tx"> <img src="4.jpg" alt="" width="150px" height="150px
                            "></div>
                        <div class="js"></div>

                        <div class="nla">


                        </div>
                        <p class="wzbf"><span style="font-size:150%; color:rgb(255, 255, 255)">姓名：李宗洋</span></p>
                        <p class="wzbfa"><span style="font-size:150%; color:rgb(255, 255, 255)">年龄：19</span></p>
                        <p class="wzbfb"><span style="font-size:150%; color:rgb(255, 255, 255)">职业：学生</span></p>
                        <br>
                        <br>
                        <p class="wzbfc
                        "><span style="font-size:150%; color:rgb(255, 255, 255)">名言：</span><br>
                            <span span style="font-size:70%; color:rgb(255, 255, 255)">愿中国青年都摆脱冷气，只是向上走，不必听自暴自<br>弃者流的话。能做事的做事，能发声的发声。有一分<br>热，发一分光，就令萤火一般，也可以在黑暗里发一<br>点光，不必等候炬火。 此后如竟没有炬火：我便是唯<br>一的光。 ——鲁迅</span></p>


                        <div class="nlb"></div>
                        <div class="nlc"></div>
                    </div>
                </div>

            </div>
            <div class="dba">

                <div class="dbaa">
                    <a href="./aihao/index.html">
                        <p style="font-size:150%; color:rgb(235, 169, 27)">兴趣爱好</p>
                    </a>

                </div>
                <div class="dbbb">
                    <a href="./zuoping/index.html">
                        <p style="font-size:150%; color:rgb(235, 169, 27)">作品</p>
                    </a>
                </div>
                <div class="dbcc">

                    <p style="font-size:150%; color:rgb(235, 169, 27)">AI
                        <p class="dbcca" style="font-size:150%; color:rgb(0, 0, 0)">40%</p>
                    </p>

                </div>
                <div class="dbdd">
                    <p style="font-size:150%; color:rgb(235, 169, 27)">PS
                        <p class="dbdda" style="font-size:150%; color:rgb(0, 0, 0)">30%</p>
                    </p>
                </div>
            </div>
            <div class="db">
                <ul class="bubbles">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </ul>
                <img src="qq.png" alt="" width="50px
                " height="50px" class="qq">
                <div class="lianxi"></div>
                <p class="jiew">QQ:2508604124
                    <br>电话：19182031934</p>
                <p class="banq" style="font-size:50%; color:rgb(170, 169, 167)"> 图片来源：pixiv：@鵜飼沙樹 @mocha＠３日目南-ナ31a<br> 封面：wallpaper<br>相关插件：jq22.com </p>
            </div>

            <div class="bg-img"><img src="3.jpg" alt="Background Image" width="1920px" height="1080px" /></div>
        </header>

        <article class="content">

        </article>

    </div>
    <!-- /container -->
    <script src="classie.js"></script>
    <script>
        (function() {

            // detect if IE : from http://stackoverflow.com/a/16657946		
            var ie = (function() {
                var undef, rv = -1; // Return value assumes failure.
                var ua = window.navigator.userAgent;
                var msie = ua.indexOf('MSIE ');
                var trident = ua.indexOf('Trident/');

                if (msie > 0) {
                    // IE 10 or older => return version number
                    rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
                } else if (trident > 0) {
                    // IE 11 (or newer) => return version number
                    var rvNum = ua.indexOf('rv:');
                    rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
                }

                return ((rv > -1) ? rv : undef);
            }());


            // disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179					
            // left: 37, up: 38, right: 39, down: 40,
            // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
            var keys = [32, 37, 38, 39, 40],
                wheelIter = 0;

            function preventDefault(e) {
                e = e || window.event;
                if (e.preventDefault)
                    e.preventDefault();
                e.returnValue = false;
            }

            function keydown(e) {
                for (var i = keys.length; i--;) {
                    if (e.keyCode === keys[i]) {
                        preventDefault(e);
                        return;
                    }
                }
            }

            function touchmove(e) {
                preventDefault(e);
            }

            function wheel(e) {
                // for IE 
                //if( ie ) {
                //preventDefault(e);
                //}
            }

            function disable_scroll() {
                window.onmousewheel = document.onmousewheel = wheel;
                document.onkeydown = keydown;
                document.body.ontouchmove = touchmove;
            }

            function enable_scroll() {
                window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;
            }

            var docElem = window.document.documentElement,
                scrollVal,
                isRevealed,
                noscroll,
                isAnimating,
                container = document.getElementById('container'),
                trigger = container.querySelector('button.trigger');

            function scrollY() {
                return window.pageYOffset || docElem.scrollTop;
            }

            function scrollPage() {
                scrollVal = scrollY();

                if (noscroll && !ie) {
                    if (scrollVal < 0) return false;
                    // keep it that way
                    window.scrollTo(0, 0);
                }

                if (classie.has(container, 'notrans')) {
                    classie.remove(container, 'notrans');
                    return false;
                }

                if (isAnimating) {
                    return false;
                }

                if (scrollVal <= 0 && isRevealed) {
                    toggle(0);
                } else if (scrollVal > 0 && !isRevealed) {
                    toggle(1);
                }
            }

            function toggle(reveal) {
                isAnimating = true;

                if (reveal) {
                    classie.add(container, 'modify');
                } else {
                    noscroll = true;
                    disable_scroll();
                    classie.remove(container, 'modify');
                }

                // simulating the end of the transition:
                setTimeout(function() {
                    isRevealed = !isRevealed;
                    isAnimating = false;
                    if (reveal) {
                        noscroll = false;
                        enable_scroll();
                    }
                }, 600);
            }

            // refreshing the page...
            var pageScroll = scrollY();
            noscroll = pageScroll === 0;

            disable_scroll();

            if (pageScroll) {
                isRevealed = true;
                classie.add(container, 'notrans');
                classie.add(container, 'modify');
            }

            window.addEventListener('scroll', scrollPage);
            trigger.addEventListener('click', function() {
                toggle('reveal');
            });
        })();
    </script>
</body>

</html>